import { createRouter, createWebHashHistory } from "vue-router";

//three菜单
import ThreeWelcomeView from "../views/three/ThreeWelcomeView.vue";
import ThreeLeafletView from "../views/three/ThreeLeafletView.vue";
import ThreeParticleView from "../views/three/ThreeParticleView.vue";
import ThreeCubemapView from "../views/three/ThreeCubemapView.vue";
import ThreeOceanView from "../views/three/ThreeOceanView.vue";
import ThreeWaterView from "../views/three/ThreeWaterView.vue";

//mapbox菜单
import MapboxWelcomeView from "../views/mapbox/MapboxWelcomeView.vue";

//cesium菜单
import CesiumWelcomeView from "../views/cesium/CesiumWelcomeView.vue";
import CesiumCubeShadeView from "../views/cesium/CesiumCubeShadeView.vue";
import CesiumPipeserView from "../views/cesium/CesiumPipeserView.vue";
import CesiumBuildView from "../views/cesium/CesiumBuildView.vue";
import CesiumCircleScanView from "../views/cesium/CesiumCircleScanView.vue";
import CesiumThreeFontView from "../views/cesium/CesiumThreeFontView.vue";

//webgl菜单
import WebglTriangleView from "../views/webgl/WebglTriangleView.vue";
import WebglCubeView from "../views/webgl/WebglCubeView.vue";
import WebglTextureView from "../views/webgl/WebglTextureView.vue";
import WebglLightsView from "../views/webgl/WebglLightsView.vue";
import WebglShadowView from "../views/webgl/WebglShadowView.vue";
import WebglLeafletView from "../views/webgl/WebglLeafletView.vue";
import WebglFlameView from "../views/webgl/WebglFlameView.vue";

//webgpu菜单
import WebgpuTriangleView from "../views/webgpu/WebgpuTriangleView.vue";
import WebgpuCubeView from "../views/webgpu/WebgpuCubeView.vue";
import WebgpuTextureView from "../views/webgpu/WebgpuTextureView.vue";
import WebgpuLightsView from "../views/webgpu/WebgpuLightsView.vue";
import WebgpuShadowView from "../views/webgpu/WebgpuShadowView.vue";
import WebgpuLeafletView from "../views/webgpu/WebgpuLeafletView.vue";

//else菜单
import ElseWasmView from "../views/else/ElseWasmView.vue";

//主菜单
import HomeView from "../views/HomeView.vue";
import ThreeView from "../views/ThreeView.vue";
import MapboxView from "../views/MapboxView.vue";
import CesiumView from "../views/CesiumView.vue";
import WebglView from "../views/WebglView.vue";
import WebgpuView from "../views/WebgpuView.vue";
import MakeapieView from "../views/MakeapieView.vue";
import ElseView from "../views/ElseView.vue";

//three的子路由
const threeRoutes = [
  {
    path: "/three/welcome",
    name: "three-welcome",
    component: ThreeWelcomeView,
  },
  {
    path: "/three/leaflet",
    name: "three-leaflet",
    component: ThreeLeafletView,
  },
  {
    path: "/three/particle",
    name: "three-particle",
    component: ThreeParticleView,
  },
  {
    path: "/three/cubemap",
    name: "three-cubemap",
    component: ThreeCubemapView,
  },
  {
    path: "/three/ocean",
    name: "three-ocean",
    component: ThreeOceanView,
  },
  {
    path: "/three/water",
    name: "three-water",
    component: ThreeWaterView,
  },
];

//mapbox的子路由
const mapboxRoutes = [
  {
    path: "/mapbox/welcome",
    name: "mapbox-welcome",
    component: MapboxWelcomeView,
  },
];

//cesium的子路由
const cesiumRoutes = [
  {
    path: "/cesium/welcome",
    name: "cesium-welcome",
    component: CesiumWelcomeView,
  },
  {
    path: "/cesium/cube-shade",
    name: "cesium-cube-shade",
    component: CesiumCubeShadeView,
  },
  {
    path: "/cesium/pipeser",
    name: "cesium-pipeser",
    component: CesiumPipeserView,
  },
  {
    path: "/cesium/build",
    name: "cesium-build",
    component: CesiumBuildView,
  },
  {
    path: "/cesium/circle-scan",
    name: "cesium-circle-scan",
    component: CesiumCircleScanView,
  },
  {
    path: "/cesium/three-font",
    name: "cesium-three-font",
    component: CesiumThreeFontView,
  },
];

//webgl的子路由
const webglRoutes = [
  {
    path: "/webgl/triangle",
    name: "webgl-triangle",
    component: WebglTriangleView,
  },
  {
    path: "/webgl/cube",
    name: "webgl-cube",
    component: WebglCubeView,
  },
  {
    path: "/webgl/texture",
    name: "webgl-texture",
    component: WebglTextureView,
  },
  {
    path: "/webgl/lights",
    name: "webgl-lights",
    component: WebglLightsView,
  },
  {
    path: "/webgl/shadow",
    name: "webgl-shadow",
    component: WebglShadowView,
  },
  {
    path: "/webgl/flame",
    name: "webgl-flame",
    component: WebglFlameView,
  },
  {
    path: "/webgl/leaflet",
    name: "webgl-leaflet",
    component: WebglLeafletView,
  },
];

//webgpu的子路由
const webgpuRoutes = [
  {
    path: "/webgpu/triangle",
    name: "webgpu-triangle",
    component: WebgpuTriangleView,
  },
  {
    path: "/webgpu/cube",
    name: "webgpu-cube",
    component: WebgpuCubeView,
  },
  {
    path: "/webgpu/texture",
    name: "webgpu-texture",
    component: WebgpuTextureView,
  },
  {
    path: "/webgpu/lights",
    name: "webgpu-lights",
    component: WebgpuLightsView,
  },
  {
    path: "/webgpu/shadow",
    name: "webgpu-shadow",
    component: WebgpuShadowView,
  },
  {
    path: "/webgpu/leaflet",
    name: "webgpu-leaflet",
    component: WebgpuLeafletView,
  },
];

//else的子路由
const elseRoutes = [
  {
    path: "/else/wasm",
    name: "else-wasms",
    component: ElseWasmView,
  },
];

//总路由
const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    meta: {
      index: 0,
    },
  },
  {
    path: "/three",
    name: "three",
    component: ThreeView,
    meta: {
      index: 1,
    },
    children: threeRoutes,
    redirect: "/three/welcome",
  },
  {
    path: "/mapbox",
    name: "mapbox",
    component: MapboxView,
    meta: {
      index: 2,
    },
    children: mapboxRoutes,
    redirect: "/mapbox/welcome",
  },
  {
    path: "/cesium",
    name: "cesium",
    component: CesiumView,
    meta: {
      index: 3,
    },
    children: cesiumRoutes,
    redirect: "/cesium/welcome",
  },
  {
    path: "/webgl",
    name: "webgl",
    component: WebglView,
    meta: {
      index: 4,
    },
    children: webglRoutes,
    redirect: "/webgl/triangle",
  },
  {
    path: "/webgpu",
    name: "webgpu",
    component: WebgpuView,
    meta: {
      index: 5,
    },
    children: webgpuRoutes,
    redirect: "/webgpu/triangle",
  },
  {
    path: "/else",
    name: "else",
    component: ElseView,
    meta: {
      index: 6,
    },
    children: elseRoutes,
    redirect: "/else/wasm",
  },
  {
    path: "/makeapie",
    name: "makeapie",
    component: MakeapieView,
    meta: {
      index: 7,
    },
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;
